<template>
		<view>
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item">
					<view class="title">昵称：</view>
					<input class="uni-input" name="userName" :value="data.username" v-model="data.username" @input="Inputhandle()" maxlength="10"/>
				</view>
				<view class="uni-form-item">
					<view class="title" >性别：</view>
					<radio-group name="sex" v-model="data.sex">
						<label>
							<radio value=0 :name="0"/><text>男</text>
						</label>
						<label>
							<radio value=1 :name="1"/><text>女</text>
						</label>
					</radio-group>
				</view>
				<view class="uni-form-item">
					<view class="title">您的生日：</view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
				<view class="uni-form-item">
					<view class="title">简介：</view>
					<textarea v-model="textareaContent" @input="Handleinput()" :maxlength="Maxlength" placeholder="简介不可以超过40字哦" class="intro" :value="data.intro"></textarea>
				</view>
				<view>
					<button form-type="submit" @click="submit">提交</button>
					<button type="default" form-type="reset">重置</button>
				</view>
			</form>
		</view>
</template>
<script>
	import graceChecker from "/static/graceChecker.js"
	import {useUserInfoStore} from '/pages/stores/userInfo.js'
	import http from '/pages/utils/request.js'
	const userStore = useUserInfoStore()
	export default {
		name: "Mylist",
		data() {
			const currentDate = this.getDate({
			    format: true
			})
			return {
				// data:{
				// 	id:userStore.info.id,
				// 	username:"",
				// 	sex:0,
				// 	birthDate:"",
				// 	intro:""
				// },
			    date: currentDate,
				textareaContent: '',
				Maxlength: 40,
				inputValue: '', // 用来绑定输入框的值
				feedbackMessage: ''
			}
		},
		props: {
		    data: { 
		      type:Object,
		      required: true 
			}
		 },
		onShow() {
			// this.data=userStore.info;
			console.log(this.data);
			this.date=this.data.birthDate;
			
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    }
		},
		methods: {
			submit(){
				console.log(this.data)
				this.data.birthDate=this.date;
				this.data.intro=this.textareaContent;
				http.post("/user/update",this.data).then(res => {
					console.log(res);
				})
			},
			Handleinput(event) {
			      // 当输入内容超过最大长度时，截取内容
			      if (event.target.value.length > this.Maxlength) {
			        this.textareaContent = event.target.value.slice(0, this.Maxlength);
			    }
			},
			// 
			Inputhandle(event) {
			      const inputLength = event.target.value.length;
			      if (inputLength > 10) {
			        // 如果输入长度超过10个字符，阻止继续输入，并给出提示
			        this.inputValue = this.inputValue.slice(0, 10);
			        this.feedbackMessage = '已达到最大输入长度';
			      } else {
			        this.feedbackMessage = ''; // 清空反馈信息
			      }
			    },
			// 
			bindDateChange: function(e) {
			    this.date = e.detail.value
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			
			    if (type === 'start') {
			        year = year - 100;
			    } else if (type === 'end') {
			        year = year + 0;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			// 
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                //定义表单规则
                var rule = [
                    {name:"userName", checkType : "string", checkRule:"1,10",  errorMsg:"姓名应为1-10个字之间"},
                    {name:"sex", checkType : "in", checkRule:"0,1",  errorMsg:"请选择性别"}
                ];
                //进行表单检查
                var formData = e.detail.value;
                var checkRes = graceChecker.check(formData, rule);
                if(checkRes){
                    uni.showToast({title:"修改成功!", icon:"none"});
                }else{
                    uni.showToast({ title: graceChecker.error, icon: "none" });
                }
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style scoped>
	.intro{
		width: 750rpx;
		height: 250rpx;
		border: 1rpx  solid gray;
		border-radius: 25rpx;
		text-align: center;
		margin: 10rpx 0;
	}
	.title {
		text-align: left;
		font-size: 36rpx;
		font-weight: 600;
		padding: 5rpx 0;
		color: darkgoldenrod;
		background-color: beige;
		}
	.uni-form-item{
		display:flex;
		text-align: center;
		flex-direction: column;
		width:100%;
		padding:10rpx 0;
		background-color: white;
		margin: 10rpx 0;
	}
	.uni-input {
		text-align: center;
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height:50rpx;
		font-size:36rpx;
		flex: 1;
	}
	radio-group, checkbox-group{
		width:100%;
		font-size: 36rpx;
	}
</style>
